<template>
  <div>
    <a-button type="primary" icon="filter" @click="handleClickFilter">筛选</a-button>
    <div v-if="panelVisible" class="filter-modal" @click="panelVisible = false"/>
    <div v-if="panelVisible" class="filter-panel">
      <div class="filter-panel-head">
        筛选
        <a-tooltip>
          <template slot="title">
            添加筛选器
          </template>
          <span class="filter-panel-head-add"><a-icon type="plus" @click="handleAddFilter"/></span>
        </a-tooltip>
        <span style="float: right;" v-if="filters.length > 1">
          <a-select :default-value="0" v-model="spliceType" @change="handleChangeSplice">
            <a-select-option :value="0" >
              且
            </a-select-option>
            <a-select-option :value="1" >
              或
            </a-select-option>
          </a-select>
        </span>
        <span style="float: right;" v-if="filters.length > 0"><a-button value="small" @click="() => $emit('filterOk', filters)">确定</a-button></span>
      </div>

      <div class="filter-panel-item" v-for="(filter, filterIndex) in filters" :key="filter.id">
        <a-select v-model="filter.field" style="width: 120px; margin-right: 10px" @change="handleChangeFields">
          <a-select-option v-for="field in fields" :value="field.name" :key="field.name">
            {{ field.alia }}
          </a-select-option>
        </a-select>
        <a-select v-if="filter.dataType === 0" v-model="filter.filterType" :default-value="0" >
          <a-select-option :value="1" >
            包含
          </a-select-option>
          <a-select-option :value="5" >
            不包含
          </a-select-option>
          <a-select-option :value="2" >
            是
          </a-select-option>
          <a-select-option :value="6" >
            不是
          </a-select-option>
        </a-select>
        <a-select v-if="filter.dataType === 5" v-model="filter.filterType" :default-value="0" >
          <a-select-option :value="2" >
            =
          </a-select-option>
          <a-select-option :value="6" >
            ≠
          </a-select-option>
          <a-select-option :value="12" >
            &gt;
          </a-select-option>
          <a-select-option :value="14" >
            &lt;
          </a-select-option>
        </a-select>
        <span class="filter-panel-head-add" style="font-size: 16px"><a-icon type="close" @click="e=>handleDeleteFilter(filterIndex)"/></span>
        <a-select mode="tags" style="width: 90%" v-model="filter.values" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'FilterModal',
    props: {
      fields: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        ModalText: "确认删除？",
        panelVisible: false,
        filters: [],
        spliceType: 0
      };
    },
    methods: {
      handleClickFilter () {
        this.panelVisible = !this.panelVisible;
      },
      handleAddFilter () {
        if (!this.fields || this.fields.length === 0) {
          return;
        }
        const obj = {
          id: this.filters.length,
          field: this.fields[0].name,
          dataType: this.fields[0].dataType,
          spliceType: this.spliceType,
          filterType: this.fields[0].dataType === 0 ? 1 : 2,
          values: []
        }
        this.filters.push(obj);
      },
      handleDeleteFilter (filterIndex) {
        this.filters.splice(filterIndex, 1);

        if (this.filters.length === 0) {
          this.$emit('filterOk', this.filters)
        }
      },
      handleChangeFields (e) {
        const filter = this.filters.find(filter => {
          return filter.field === e
        });
        const field = this.fields.find(field => {
          return field.name === e
        });
        filter.dataType = field.dataType;
        if (filter.dataType === 0) {
          filter.filterType = 1;
        } else if (filter.dataType === 5) {
          filter.filterType = 2;
        }
      },
      handleChangeSplice (e) {
        this.filters.map(filter => {
          filter.spliceType = this.spliceType
        })
      }
    },
    created () {
    }
  }
</script>

<style scoped>
  .filter-panel{
    border-radius: 4px;
    position: absolute;
    margin: 5px 0 0 -110px;
    width: 320px;
    height: auto;
    background: white;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5)
  }
  .filter-modal{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 1;
  }
  .filter-panel-head {
    border-bottom: 2px solid #e0e0e0;
    padding: 0 0 0 20px;
    line-height: 44px;
    font-size: 16px;
    color: #333;
    width: 100%;
    height: 44px;
  }
  .filter-panel-head-add {
    float: right;
    margin: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #9e9e9e;
    line-height: 1em;
    right: 0;
  }
  .filter-panel-item{
    border-bottom: 1px solid #e8e8e8;
    padding: 0 0 0 20px;
    line-height: 44px;
    font-size: 16px;
    color: #5e5d5d;
    background: #fafafa;
    width: 100%;
    height: auto;
  }
</style>
